<template>
    <div class="clearfix">
        <a-upload
                action="/system/api/upload/file"
                list-type="picture-card"
                :file-list="fileLists"
                @preview="handlePreview"
                @change="handleChange"
                v-if="max != 0"
                :accept="accept"
                :beforeUpload="beforeUpload"
        >
            <div v-if="fileLists.length < max">
                <a-icon type="plus"/>
                <div class="ant-upload-text">
                    Upload
                </div>
                <span style="font-size: 10px;">
                    {{accept}}<br>
                    图片大小: {{(size/1024/1024)+'M'}}<br/>
                    支持 {{max}} 张
                </span>
            </div>
        </a-upload>
        <div v-else>
            <span v-if="!fileLists.length">暂无文件</span>
            <div v-else>
                <img @click="setPreImg(item)" style="width: 100px;height: 100px;margin-right: 10px;" v-for="(item,index) in fileLists" :key="index" :src="item.url" :onerror="defaultImg"/>
            </div>
        </div>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: "xlImages",
        data() {
            return {
                previewVisible: false,
                previewImage: '',
                fileLists: [],
                size:2097152,
                accept:'.jpg,.jpeg,.png',
                defaultImg: 'this.src="' + require('../../assets/images/defavatar.jpg') + '"'
            }
        },
        props: {
            fileList: String,
            max: {
                type: Number,
                default: 5
            },
            specifications:{
                type:String,
                default:'2097152;.jpg,.jpeg,.png'
            }
        },
        model: {
            prop: 'fileList',
            event: 'change'
        },
        created() {
            if(this.specifications){
                let specifications = this.specifications.split(';')
                this.size = Number(specifications[0])
                this.accept = specifications[1]
            }
            if (this.fileList) {
                let fileList = this.fileList.split(',')
                console.log(fileList, 123)
                this.fileLists = fileList.map((item, index) => {
                    return {
                        uid: index,
                        name: item,
                        status: 'done',
                        url: item,
                    }
                })
            } else {
                this.fileLists = []
            }
        },
        methods: {
            setPreImg(item){
                this.previewVisible = true
                this.previewImage = item.url
            },
            beforeUpload(e,file){
                if(e.size > this.size){
                    file.splice(file.length - 1)
                    this.$message.error('文件大小超出限制')
                    return false
                }
                let fileAccept = e.name.split('.').pop()
                let accept = this.accept.slice(1).split(',.')
                if(accept.indexOf(fileAccept.toLowerCase()) == -1){
                    file.splice(file.length - 1)
                    this.$message.error('文件格式错误')
                    return false
                }
            },
            getBase64(file) {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => resolve(reader.result);
                    reader.onerror = error => reject(error);
                });
            },
            handleCancel() {
                this.previewVisible = false;
            },
            async handlePreview(file) {
                if (!file.url && !file.preview) {
                    file.preview = await this.getBase64(file.originFileObj);
                }
                this.previewImage = file.url || file.preview;
                this.previewVisible = true;
            },
            handleChange(info) {
                if (info.fileList.length == 0) {
                    this.$emit('change', '')
                    return
                }
                this.fileLists = info.fileList
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} 文件上传成功`);
                    let paths = this.fileLists.map(item => {
                        console.log(item)
                        return item?.response?.result?.path || item.url
                    }).toString()
                    this.$emit('change', paths)
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} 上传失败`);
                }
            }
        },
        watch: {
            fileList() {
                if (this.fileList) {
                    let fileList = this.fileList.split(',')
                    this.fileLists = fileList.map((item, index) => {
                        return {
                            uid: index,
                            name: item,
                            status: 'done',
                            url: item,
                        }
                    })
                } else {
                    this.fileLists = []
                }
            }
        },
    }
</script>

<style scoped>

</style>
